<template>
  <div style="heigth: 100%;">
    <div class="btbox btboxbg flexb fontz">
      {{$t('jy.keyData')}}
    </div>
    <div class="priceNum fontz">
      <div class="nowTotalEos">
        <p>{{$t('jy.eosTotal')}}</p>
        <div class="mt fontdd flex" :class="Number(allEosChange) < 0 ? 'redColor' : 'greenColor'">
          <span>{{allEos}} EOS</span><i class="iconfont fontz" :class="Number(allEosChange) < 0 ? 'icon-xia' : 'icon-shang'"></i>
        </div>
        <div class="redColor" v-if="Number(allEosChange) < 0">
          {{allEosChange}} EOS
        </div>
        <div class="greenColor" v-else>
          + {{allEosChange}} EOS
        </div>
      </div>
      <div class="nowRemainRam">
        <p>{{$t('jy.unassignedRam')}}</p>
        <div class="mt fontdd flex" :class="Number(balanceRamChange) < 0 ? 'redColor' : 'greenColor'">
          <span>{{balanceRam}} KB</span><i class="iconfont fontz" :class="Number(balanceRamChange) < 0 ? 'icon-xia' : 'icon-shang'"></i>
        </div>
        <div class="redColor" v-if="Number(balanceRamChange) < 0">
          {{balanceRamChange}} KB
        </div>
        <div class="greenColor" v-else>
          + {{balanceRamChange}} KB
        </div>
      </div>
    </div>
    <div class="ramFormula fontz">
      <!-- <el-tooltip placement="bottom-start" effect="light">
        <div slot="content" class="formula">
          <p>RAM的价格采用Bancor算法计算得出经过推导，算法精简如下：</p>
          <div class="flex formulaContent">
            <span class="ramPrice">RAM价格</span>
            <span class="ramSign">≈</span>
            <div class="flex">
              <span>当前EOS池子总量</span>
              <span>当前全网剩余RAM</span>
              <em></em>
            </div>
          </div>
        </div>
        <div class="formulaTip">
          RAM价格公式
        </div>
      </el-tooltip> -->
      <el-popover
        placement="bottom-start"
        trigger="hover"
        :width="$store.state.app.language === 'en' ? 350 : 290">
        <!-- <div class="formula" :style="$store.state.app.language === 'en' ? 'padding: 0;' : 'padding: 10px;'"> -->
        <div class="formula">
          <p>{{$t('jy.ramFormulaCaption')}}</p>
          <div class="flex formulaContent">
            <span class="ramPrice" :style="$store.state.app.language === 'en' ? 'flex: 2.9;-ms-flex: 2.9;-webkit-box-flex: 2.9;' : ''">
              {{$t('jy.ramPrice')}}
            </span>
            <span class="ramSign"
              :style="$store.state.app.language === 'en' ? 'flex: 0.6;-ms-flex: 0.6;-webkit-box-flex: 0.6;' : ''">
              ≈
            </span>
            <div class="flex">
              <span :style="$store.state.app.language === 'en' ? 'margin-left: 33px;' : 'margin-left: 10px;'">{{$t('jy.eosTotal')}}</span>
              <span :style="$store.state.app.language === 'ko' ? 'margin-top: 8px; margin-left: -4px;' : 0">{{$t('jy.unassignedRam')}}</span>
              <em :style="$store.state.app.language === 'en' ? 'width: 208px;' : 'width: 145px;'"></em>
            </div>
          </div>
        </div>
        <div class="formulaTip" slot="reference">
          {{$t('jy.ramPriceFormula')}} <span slot="reference" class="iconfont icon-huaban"></span>
        </div>
      </el-popover>
    </div>
  </div>

</template>

<script>
// import Io from '@/utils/socket';
import { EosModel } from '@/utils/eos/index';

export default {
  name: 'ram-right-top',
  data() {
    return {
      balanceRam: '0.00',
      balanceRamChange: '0.00',
      allEos: '0.0000',
      allEosChange: '0.0000',
      timerPrice: null,
    }
  },
  components: {
  },
  props: {
  },
  watch: {
  },
  created() {
  },
  mounted() {
    this.handleGetTableRow();
  },
  beforeDestroy() {
    if (this.timerPrice) {
      clearTimeout(this.timerPrice);
    }
  },
  methods: {
    handleGetTableRow() {
      EosModel.getRamPrice((price, res) => {
        if (!price.code) {
          const row = res.rows[0];
          const ramBlance = row.base.balance;
          const eosBlance = row.quote.balance;
          const ThisBalanceRam = (parseFloat(ramBlance, 0) / 1024).toFixed(2);
          // const ThisAllEos = (parseFloat(ramBlance, 0) * price).toFixed(4);
          const ThisAllEos = parseFloat(eosBlance, 0).toFixed(4);
          const balanceRamStorage = Number(sessionStorage.getItem('balanceRamStorage'));
          const allEosStorage = Number(sessionStorage.getItem('allRamEosStorage'));
          if (balanceRamStorage && Number(ThisBalanceRam) !== Number(balanceRamStorage)) {
            this.balanceRamChange = (ThisBalanceRam - balanceRamStorage).toFixed(2);
          }
          if (allEosStorage && Number(ThisAllEos) !== Number(allEosStorage)) {
            this.allEosChange = (ThisAllEos - allEosStorage).toFixed(4);
          }
          this.balanceRam = ThisBalanceRam;
          this.allEos = ThisAllEos;
          sessionStorage.setItem('balanceRamStorage', ThisBalanceRam);
          sessionStorage.setItem('allRamEosStorage', ThisAllEos);
        }
        if (this.timerPrice) {
          clearTimeout(this.timerPrice);
        }
        this.timerPrice = setTimeout(() => {
          this.handleGetTableRow();
        }, 10000);
      })
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";

.btbox {
  height: 42px;
  padding: 0 11px;
}

.btboxbg {
  background: $-topcolorf7;
}

.theme-1B1D27 {
  .btboxbg {
    background: rgba(0, 0, 0, 0.2);
    color: $-main-color;
  }
}

.ramFormula {
  .formulaTip {
    display: inline;
    padding-left: 10px;
    &:hover {
      color: #278EDA;
      cursor: pointer;
    }
  }
}

.formula {
  padding: 10px;
  font-size: 14px;
  p {
    text-align: left;
    line-height: 24px;
    margin-bottom: 20px;
  }
  .formulaContent {
    height: 50px;
    .ramPrice {
      flex: 4;
      text-align: center;
    }
    .ramSign {
      flex: 1;
    }
    div {
      position: relative;
      height: 46px;
      flex: 8;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      padding-left: 7px;
      span:first-child {
        margin-left: 10px;
      }
      em {
        position: absolute;
        top: 50%;
        left: 0;
        display: block;
        width: 145px;
        height: 1px;
        background: #666;
      }
    }
  }
}

.fontdd {
  font-size: 16px !important;
}

.priceNum {
  padding: 5px 10px;
  .nowRemainRam {
    margin-top: 10px;
  }
  .greenColor {
    color: #67C269;
  }
  .redColor {
    color: #EE1443;
  }
}
</style>

